<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>55社区</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="/theme/default/images/favicon.png">
    <link href="${ctx}/static/css/amazeui.min.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/css/style.css" rel="stylesheet" type="text/css" />
    <script src="${ctx}/static/js/jquery-1.10.2.min.js"></script>
    <script src="${ctx}/static/js/time.js"></script>
</head>
<body>
<header data-am-widget="header" class="am-header am-header-default sq-head ">
    <div class="am-header-left am-header-nav">
        <a href="javascript:history.back()" class="">
            <i class="am-icon-chevron-left"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="" class="">商品分类</a>
    </h1>
</header>
<div style="height: 49px;"></div>
<div class="cate-search">
    <input type="text" class="cate-input" placeholder="请输入您要的搜索的产品关键词" />
    <input type="button" class="cate-btn" />
</div>
<div class="content-list">
    <div class="list-left">

            <%--<c:forEach var="k" items="${goodsList}" varStatus="ss" begin="0" end="5">--%>
                <%--<li class="fenlei ${ss.first?'current':''}" onclick="return loadgoods(${k.goods_id})"><a>${k.goods_name}</a></li>--%>
            <%--</c:forEach>--%>

        <%--<c:forEach var="goodSort" items="${goodsList}" varStatus="ss">--%>
            <%--&lt;%&ndash;<li>&ndash;%&gt;--%>
                <%--&lt;%&ndash;<a href="#" class="fenlei" ${ss.first?' current':''}>${goodSort}</a>&ndash;%&gt;--%>
            <%--&lt;%&ndash;</li>&ndash;%&gt;--%>
            <%--<li class="fenlei" ${ss.first?' current':''}><a href="">${goodSort.goods_type}</a></li>--%>
            <%--&lt;%&ndash;${goodSort}&ndash;%&gt;--%>
        <%--</c:forEach>--%>
                <c:forEach var="bean" items="${goodsList}" varStatus="ss">
                    <li class="${ss.first?'current':''}" categoryId="${bean.goods_id}"><a
                            href="javascipt:void(0);">${bean.goods_type}</a></li>
                </c:forEach>
    <%--<li><a href="">生鲜熟食</a></li>--%>
        <%--<li class="current feilei"><a href="">粮油大米</a></li>--%>
        <%--<li class="feilei"><a href="">烟酒饮料</a></li>--%>
        <%--<li class="feilei"><a href="">休闲食品</a></li>--%>
        <%--<li class="feilei"><a href="">个人洗护</a></li>--%>
        <%--<li><a href="">家居家纺</a></li>--%>
    </div>
    <div class="list-right">
        <ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-avg-md-2 am-avg-lg-4 am-gallery-default am-no-layout">
            <li>
                <div class="am-gallery-item">
                    <%--<a href="list.html" class="">--%>
                        <%--<img src=" images/test6.png">--%>
                        <%--<h3 class="am-gallery-title">米面粮油</h3>--%>
                    <%--</a>--%>
                </div>
            </li>
            <%--<li>--%>
                <%--<div class="am-gallery-item">--%>
                    <%--<a href="list.html" class="">--%>
                        <%--<img src=" images/test7.png">--%>
                        <%--<h3 class="am-gallery-title">食用油</h3>--%>
                    <%--</a>--%>
                <%--</div>--%>
            <%--</li>--%>
            <%--<li>--%>
                <%--<div class="am-gallery-item">--%>
                    <%--<a href="list.html" class="">--%>
                        <%--<img src=" images/test8.png">--%>
                        <%--<h3 class="am-gallery-title">厨房调料</h3>--%>
                    <%--</a>--%>
                <%--</div>--%>
            <%--</li>--%>
            <%--<li>--%>
                <%--<div class="am-gallery-item">--%>
                    <%--<a href="list.html" class="">--%>
                        <%--<img src=" images/test9.png">--%>
                        <%--<h3 class="am-gallery-title">特色干货</h3>--%>
                    <%--</a>--%>
                <%--</div>--%>
            <%--</li>--%>

        </ul>
    </div>
</div>

<!--底部-->
<div style="height: 55px;"></div>
<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default sq-foot am-no-layout" id="">
    <ul class="am-navbar-nav am-cf am-avg-sm-4">
        <li>
            <a href="index.html" class="curr">
                <span class="am-icon-home"></span>
                <span class="am-navbar-label">首页</span>
            </a>
        </li>
        <li>
            <a href="category.html" class="">
                <span class="am-icon-th-large"></span>
                <span class="am-navbar-label">分类</span>
            </a>
        </li>

        <li>
            <a href="shopcart.html" class="">
                <span class="am-icon-shopping-cart"></span>
                <span class="am-navbar-label">购物车</span>
            </a>
        </li>
        <li>
            <a href="member.html" class="">
                <span class="am-icon-user"></span>
                <span class="am-navbar-label">我的55</span>
            </a>
        </li>
    </ul>
</div>


<script type="text/javascript">
    //美食系列当前项切换
    $(".fenlei").click(function () {
        $(this).siblings().removeClass("current");
        $(this).addClass("current");
    });
    //分类食物系列table切换
    $(".fenlei").click(function (i) {
        //获取食物名称
        var goods_type=$(this).text();
        //定义json对象 传递参数
        var myData={"goods_type":goods_type};
        loadgoods(myData);//调用ajax加载函数
    });
    //ajax加载goods信息
    function loadgoods(myData){
        $.post("${ctx}/goods/find.do",myData,function (data) {
            var a='<a href="{{url}}" class=""><img src="{{img}}" alt=""/></span><h3 class="ms-tit">{{title}}</h3></a>';
            $(".am-gallery-item").html(""); //清空元素
            for (var i = 0; i <data.length; i++) {
                var s=data[i];//取出当前食物
                var con=a.replace("{{url}}",'${ctx}/goods/con.do?goods_id='+s.goods_id);
                con=con.replace("{{img}}","${ctx}/static/images/"+s.goods_img);
                con=con.replace("{{title}}",s.goods_name);
                $(".am-gallery-item").append(con);
            }
        });

    }

    $(function () {
        //默认加载第一个地址店铺
        $('.fenlei').eq(0).click();

    });
    //根据一级分类加载二级分类
    function loadcategory(me) {
        var categoryId = me.attr("categoryId");
        $.post("${ctx}/category/child.do", {"category_id": categoryId}, function (data) {
            var list = '<li><div class="am-gallery-item"><a href="{{url}}" class=""><img src="{{img}}"><h3 class="am-gallery-title">{{name}}</h3></a></div></li>';
            $("#am-gallery-item-ul").html(""); //清空二级分类
            for (var i = 0; i < data.length; i++) {
                var child = data[i];
                var con = list.replace("{{img}}", "${ctx}/static/images/" + child.category_img);
                con = con.replace("{{name}}", child.category_name);
                con = con.replace("{{url}}", "${ctx}/goods/goodsList.do?category_id=" + child.category_id);
                $("#am-gallery-item-ul").append(con);
            }
        });
    }
</script>

<script src="${ctx}/static/js/jquery.min.js"></script>
<script src="${ctx}/static/js/amazeui.min.js"></script>

</body>
</html>
